<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	    xmlns:f="http://java.sun.com/jsf/core"
	    xmlns:h="http://java.sun.com/jsf/html"
	    xmlns:ui="http://java.sun.com/jsf/facelets"
	    xmlns:p="http://primefaces.org/ui"
	    xmlns:pe="http://primefaces.org/ui/extensions"
	    template="/template/template.xhtml">
    
   	<ui:param name="pageTitle" value="Cadastro de Produto" />
   
    <ui:define name="body"> 
    	<p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();"/>  
              
		<p:dialog modal="true" widgetVar="statusDialog" header="Carregando..."   
		        draggable="false" closable="false">  
		    <p:graphicImage value="/resources/images/ajaxloadingbar.gif" />  
		</p:dialog>  
    	<h:form id="formProduto">  
    				<p:growl id="msgs"/>  
				    <p:panelGrid id="cadastro" columns="2" styleClass="cdtProduto" style="float:left;"> 
				     
					    <f:facet name="header">  
					        Cadastro de Produto  
					    </f:facet>  
					  
					    <p:outputLabel for="nome" value="Nome: " />  
			            <p:inputText id="nome" value="#{produtoController.produto.nome}" 
			            					   required="true" 
			            					   label="Nome"
			            					   requiredMessage="Por favor, digite o nome."
			            					   maxlength="20"
			            					   size="25"
			            					   title="Digite o nome do Produto."
			            					   >
			         							<p:tooltip for="nome" showEvent="focus" hideEvent="blur" />    
			            </p:inputText>    
			  
			            <p:outputLabel for="preco" value="Pre&ccedil;o: " />
			            <p:inputText id="preco"  value="#{produtoController.produto.preco}" 
			            						 label="preco" 
			            						 required="true"
			            						 requiredMessage="Por favor, digite o pre&ccedil;o."
			            						 size="25"
			            						 title="Digite o pre&ccedil;o do produto."
			            						 styleClass="preco"
			            						 converter="precoConverter"
			            						 onfocus="$('.preco').maskMoney({showSymbol:true, symbol:'R$',thousands:'.', decimal:','});"
			            						 > 							 
			            						<p:tooltip for="preco" showEvent="focus" hideEvent="blur" />  	
			            						
			            </p:inputText>
			            
			            <p:outputLabel for="descricao" value="Descri&ccedil;&atilde;o: " />
			            <p:inputTextarea id="descricao" value="#{produtoController.produto.descricao}" 
			            					  maxlength="500"
			            					  required="true"
			            					  requiredMessage="Por favor, digite uma descri&ccedil;&atilde;o."
			            					  rows="5" cols="28" 
			            					  counter="counter"    
    										  counterTemplate="Voc&ecirc; possui {0} caracteres restantes." autoResize="false"
			            					 >
			        	
			        	</p:inputTextarea>
			        	<h:outputText id="valorContador"/>
					  	<h:outputText id="counter" style="font-size:12px;"/>
					    <f:facet name="footer">
					    	<p:commandButton value="Cadastrar" 
					    					 update=":formProduto:produtos, :formProduto:cadastro, :formProduto:msgs, @parent"   
                							 action="#{produtoController.salvar}"   
                							 id="btnGlobal"
                							 icon="ui-icon-check"
                							 rendered="#{produtoController.btCadastro == true}">
	                			<p:collector value="#{produtoController.produto}"   
	                            			 addTo="#{produtoController.produtos}" />
                			</p:commandButton>
                			<p:commandButton value="Salvar" 
					    					 update=":formProduto:produtos, :formProduto:cadastro, :formProduto:msgs, @parent"  
                							 action="#{produtoController.alterarProduto()}"
                							 id="btnGlobalSalvar"
                							 icon="ui-icon-check"
                							 rendered="#{produtoController.btSalvar == true}"
                							  />
                			<p:commandButton value="Cancelar"  
                							 update="cadastro" 
                			                 process="@this" 
                			                 actionListener="#{produtoController.limpar}"
                			                 icon="ui-icon-cancel" />
                			
					    </f:facet> 
					</p:panelGrid>
					<p:outputPanel id="produtos">
				     	<p:dataTable id="tbProdutos" 
				     				 var="_produto" 
				     				 value="#{produtoController.produtos}" 
				     				 style="float:left;margin-left:10px;"
				     				 emptyMessage="Nenhum produto cadastrado."
				     				 editable="true"
				     				 paginator="true" rows="5"  
                            		 paginatorTemplate="{PageLinks}"
		                             selection="#{produtoController.selecionado}" selectionMode="single"  
		                             rowKey="#{_produto.idProduto}"
				     				 >
				     		<p:ajax event="rowSelect" listener="#{produtoController.onRowSelect}" update=":formProduto:cadastro"/>		 
			     			<p:growl id="msgstb"/> 
			     			<f:facet name="header">  
				            	Produtos Cadastrados 
					        </f:facet>  
					  
					        <p:column headerText="Nome" width="350" filterBy="#{_produto.nome}">
					            	<h:outputText value="#{_produto.nome}" />
					        </p:column>
					        
					        <p:column headerText="Pre&ccedil;o" width="215" filterBy="#{_produto.preco}">
					            	<h:outputText value="R$ #{_produto.preco}" 
					            	styleClass="tbPreco"/>
					            	 
					        </p:column>   
					        					  
					        <f:facet name="footer">  
					             
				                <p:commandButton id="selectButton" 
				                				 update=":formProduto:displayProduto" 
				                				 oncomplete="productDialog.show();" 
				                				 icon="ui-icon-search" 
				                				 title="Ver Detalhes"
				                				 value="Ver Detalhes">  
					                <f:setPropertyActionListener value="#{_produto}" 
					                							 target="#{produtoController.selecionado}"
																 />  
					            </p:commandButton> 
					            <p:commandButton 
					            			   title="Excluir Produto"
					            			   update=":formProduto:produtos, :formProduto:cadastro, :formProduto:msgs" 
					            			   process=":formProduto:produtos"
					            			   action="#{produtoController.excluirProduto()}"
					            			   icon="ui-icon-trash"
					            			   value="Excluir Produto"
					            			   >  
				                    <p:collector value="#{_produto}"  
				                                 removeFrom="#{produtoController.produtos}" />  
				                </p:commandButton>
					        </f:facet>  
					    </p:dataTable>
					    
					</p:outputPanel>  
					
					<p:dialog header="Detalhes do Produto" 
					    		  widgetVar="productDialog" 
					    		  resizable="false" 
					    		  id="productDialog"  
                				  showEffect="fade" 
                				  onHide="#{produtoController.limpar()}"
                				  hideEffect="explode" modal="true">  
  
					        <h:panelGrid id="displayProduto" columns="2" cellpadding="4" style="margin:0 auto;">  
					  
					            <f:facet name="header">  
					                 
					            </f:facet>  
					  
					            <h:outputText value="Nome:" />  
					            <h:outputText value="#{produtoController.produto.nome}" style="font-weight:bold"/>  
					            
					            <h:outputText value="Pre&ccedil;o:" />  
					            <h:outputText value="R$ #{produtoController.produto.preco}" style="font-weight:bold"/> 
					            
					            <h:outputText value="Descri&ccedil;&atilde;o:" /> <br /> 
					            <p:inputTextarea readonly="true" value="#{produtoController.produto.descricao}" />
					        </h:panelGrid>  
					  
					    </p:dialog>  
			</h:form>
    </ui:define>
</ui:composition>